<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        123
        <h2>单选框 change 事件</h2>
        <p>{{ radio3 }}</p>
        <el-radio-group v-model="radio3" @change="r3">
            <el-radio-button label="男">男</el-radio-button>
            <el-radio-button label="女">女</el-radio-button>
            <el-radio-button label="未知">未知</el-radio-button>
        </el-radio-group>
        
        <h2>单选框</h2>
        <p>单选框按钮组2 - 数据和下面的按钮组不同</p>
        <p>{{ radio2 }}</p>
        <el-radio-group v-model="radio2">
            <el-radio-button label="a">备选项</el-radio-button>
            <el-radio-button label="b">备选项</el-radio-button>
        </el-radio-group>
        <p>单选框按钮组</p>
        <el-radio-group v-model="radio">
            <el-radio-button label="7">备选项</el-radio-button>
            <el-radio-button label="8">备选项</el-radio-button>
            <el-radio-button label="9">备选项</el-radio-button>
        </el-radio-group>
        <p>单选框组</p>
        <el-radio-group v-model="radio">
            <el-radio label="4" border>备选项</el-radio>
            <el-radio label="5" border>备选项</el-radio>
            <el-radio label="6">备选项</el-radio>
        </el-radio-group>
        <p>{{ radio }}</p>
        <el-radio v-model="radio" label="1">备选项</el-radio>
        <el-radio v-model="radio" disabled label="2">备选项</el-radio>
        <el-radio v-model="radio" label="3">备选项</el-radio>
        
        
        <h2>按钮组</h2>
        <el-button-group>
            <el-button type="primary" icon="el-icon-delete"></el-button>
            <el-button type="primary" icon="el-icon-search" :loading="true">搜索</el-button>
            <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
        </el-button-group>

        <h2>按钮 禁用状态</h2>
        <p>
            <el-checkbox v-model="bool">勾选协议</el-checkbox>
            <!-- <el-button type="info" @click="btn2" size="mini">勾选协议</el-button> -->
            <!-- 请勾选协议后再注册 -->
        </p>
        <el-button type="primary" :disabled="!bool" @click="btn">立即注册</el-button>

        <h2>按钮</h2>
        <el-button>默认按钮</el-button>

        <el-button type="primary">主要按钮</el-button>
        <el-button type="primary" plain>主要按钮</el-button>
        <el-button type="primary" circle icon="el-icon-success"></el-button>

        <el-container>
            <el-main>
                <el-row :gutter="10">
                    <el-col :span="4">
                        <div class="dh">
                            左侧导航
                            <i class="el-icon-edit"></i>
                        </div>
                    </el-col>
                    <el-col :span="11">
                        <div class="lb">
                            轮播图
                            <i class="el-icon-upload"></i>
                        </div>
                        <div class="lb2">
                            轮播图2
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="g">
                            广告位
                        </div>
                        <div class="g2">
                            广告位2
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="hi">
                            Hi! 你好
                        </div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>

    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        data() {
            return {
                bool: false,
                radio: '1',
                radio2: 'a',
                radio3: ''
            }
        },
        methods: {
            btn() {
                //请求注册接口
                alert("注册成功");
            },
            btn2() {
                //修改 bool
                this.bool = !this.bool;
            },
            r3(e) {
                console.log(e);
                console.log(this.radio3);
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .el-container {
        width: 1200px;
        margin: auto;
    }

    .dh,
    .lb,
    .lb2,
    .g,
    .g2,
    .hi {
        background: #F56C6C;
        color: #fff;
    }

    .dh {
        height: 500px;
    }

    .lb {
        height: 290px;
        margin-bottom: 10px;
    }

    .lb2 {
        height: 200px;
    }

    .g {
        height: 290px;
        margin-bottom: 10px;
    }

    .g2 {
        height: 200px;
    }

    .hi {
        height: 500px;
    }

    .span {
        background: red;
        color: #fff;
    }

    h3 {
        margin: 40px 0 0;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>
